<template>
  <el-row style="background-color: skyblue">
    <el-col :span="6" :xs="24" style="background: salmon">
      <el-row>
        <el-col :span="24" :xs="24">
          <strong>闲事随心管理后台</strong>
          <el-divider></el-divider>
        </el-col>
        <el-col :span="24" :xs="24">
          <el-row>
            <el-col :span="24" :xs="24">
              <span><i class="el-icon-s-home">首页</i></span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24" :xs="24">
          <el-collapse name="a" style="background: salmon">
            <el-collapse-item name="a" title="用户账号管理">
              <p style="background: skyblue">
                <router-link to="/center/"
                  ><i class="el-icon-user"></i> 账号</router-link
                >
              </p>
              <p style="background: skyblue">
                <el-link> <i class="el-icon-document"></i> 个人信息</el-link>
              </p>
            </el-collapse-item>
            <el-collapse-item name="b" title="手机账号管理">
              <p style="background: skyblue">
                <router-link to="/center/phone"
                  ><i class="el-icon-user"></i>手机号</router-link
                >
              </p>
              <p style="background: skyblue">
                <el-link> <i class="el-icon-document"></i> 个人信息</el-link>
              </p>
            </el-collapse-item>
            <el-collapse-item name="c" title="商品管理">
              <p style="background: skyblue">
                <router-link to="/center/shopa"
                  ><i class="el-icon-user"></i>商品信息</router-link
                >
              </p>
              <p style="background: skyblue">
                <el-link> <i class="el-icon-document"></i>商品存货</el-link>
              </p>
              <p style="background: skyblue">
                <el-link> <i class="el-icon-document"></i>商品出售日志</el-link>
              </p>
              <p style="background: skyblue">
                <el-link> <i class="el-icon-document"></i>商品进货</el-link>
              </p>
            </el-collapse-item>
            <el-collapse-item name="d" title="图书管理">
              <p style="background: skyblue">
                <router-link to="/center/booka"
                  ><i class="el-icon-user"></i>图书信息</router-link
                >
              </p>
              <p style="background: skyblue">
                <el-link> <i class="el-icon-document"></i>图书数量</el-link>
              </p>
              <p style="background: skyblue">
                <el-link> <i class="el-icon-document"></i>图书存货</el-link>
              </p>
              <p style="background: skyblue">
                <el-link> <i class="el-icon-document"></i>图书更新</el-link>
              </p>
            </el-collapse-item>
            <el-collapse-item name="e" title="电影管理">
              <p style="background: skyblue">
                <router-link to="/center/video"
                  ><i class="el-icon-user"></i>电影信息</router-link
                >
              </p>
              <p style="background: skyblue">
                <el-link> <i class="el-icon-document"></i>上传记录</el-link>
              </p>
            </el-collapse-item>
            <el-collapse-item name="f" title="修改密码">
              <p style="background: skyblue">
                <router-link to="/center/pass"
                  ><i class="el-icon-user"></i>进入界面</router-link
                >
              </p>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="18" :xs="24">
      <el-row>
        <el-row>
          <el-col :span="24" :xs="24" style="border-bottom: 1px solid black">
            <strong>用户列表</strong>
          </el-col>
        </el-row>

        <el-row>
          <el-col
            id="a"
            :span="24"
            :xs="24"
            style="
              box-sizing: border-box;
              height: 60px;
              padding-top: 5px;
              margin-top: 10px;
            "
          >
            <el-menu
              :default-active="id"
              class="el-menu-demo"
              mode="horizontal"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
              @select="sel"
            >
              <el-menu-item index="1">处理中心</el-menu-item>
              <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
                <el-submenu index="2.4">
                  <template slot="title">我的工作台</template>
                  <el-menu-item index="2-5">选项1</el-menu-item>
                  <el-menu-item index="2-6">选项2</el-menu-item>
                  <el-menu-item index="2-7">选项3</el-menu-item>
                </el-submenu>
              </el-submenu>
              <el-menu-item index="3" disabled>消息中心</el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" :xs="24">
            <el-row>
              <el-col :span="24" :xs="24">
                <el-table :data="table" border>
                  <el-table-column label="账号" prop="id" width="100%">
                  </el-table-column>

                  <el-table-column label="密码" prop="name" width="100%">
                  </el-table-column>

                  <el-table-column label="时间" prop="mibao" width="100%">
                  </el-table-column>
                  <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                      <el-button
                        @click="handleClick(scope.row)"
                        type="text"
                        size="small"
                        >查看</el-button
                      >
                      <el-button type="text" size="small">编辑</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col :span="24" :xs="24">
                <el-pagination
                  :total="total"
                  :current-page="start"
                  :page-size="page"
                  @current-change="sel"
                  layout="total,prev,pager,next"
                ></el-pagination>
                {{ this.$store.state.page }}

                {{ this.$store.state.index }}
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-row>
    </el-col>
    <!-- <el-upload
  class="upload-demo"
  drag
  action="http://localhost/tp5/publica/index/api/upload"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload> -->

    <ul>
      <li v-for="a in list" :key="a.id">
        {{ a.user }}{{ a.text }}
        <el-popconfirm
          confirmButtonText="好的"
          cancelButtonText="不用了"
          icon="el-icon-info"
          iconColor="red"
          title="这是一段内容确定删除吗？"
          @onConfirm="del(a.id)"
          @onCancel="cel"
        >
          <el-button slot="reference">删除</el-button>
        </el-popconfirm>
      </li>
    </ul>
    <input type="file" name="file" ref="file" />
    <button @click="file">上传</button>
    <!-- <button @click=""></button> -->
    <div id="can" style="width: 500px; height: 500px"></div>
  </el-row>
</template>
<script>
import axios from "axios";
import qs from "qs";
axios.defaults.baseURL = "http://localhost:8000/tp5/";
//axios.defaults.baseURL="/tp5/"
import echarts from "echarts";
export default {
  mounted() {
    // const h = this.$http();
    // h.then((res) => {
    //   console.log(res);
    // });
    const ech = echarts.init(document.getElementById("can"), "dark");
    ech.setOption({
      title: {
        text: "hello",
      },
      legend: { data: ["招商银行", "浦发银行"] },
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        name: "日期",

        nameTextStyle: {
          fontWeight: 600,
          fontSize: 18,
        },
      },
      yAxis: {
        type: "value",
        name: "纵轴名称",
        nameTextStyle: {
          fontWeight: 600,
          fontSize: 18,
        },
      },
      label: { text: "nihao" },
      tooltip: { trigger: "axis" }, // axis   item   none三个值
      series: [
        {
          name: "招商银行",
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: "line",
        },
        {
          name: "浦发银行",
          data: [620, 711, 823, 934, 1445, 1456, 1178],
          type: "line",
        },
      ],
    });
  },
  data() {
    return {
      id: "1",
      list: [
        {
          id: 1,
          user: "流通",
          text: "世界真好",
        },
        {
          id: 2,
          user: "撒网",
          text: "世界真好",
        },
      ],
      total: 150,
      start: 0,
      page: 3,
      d: "",
      tablea: [{ id: "", name: "", mibao: "" }],
    };
  },
  methods: {
    file: function () {
      const form = new FormData();
      const file = this.$refs.file.files[0];
      form.append("file", file);
      const text = {
        file: form,
      };
      const header = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      axios
        .post("publica/index/api/upload", form, header)
        .then((res) => {
          console.log(res.data);
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    sel(value) {
      this.$store.state.index = value;
      this.$store.dispatch("page");
    },
    // sel:function(q){
    //   console.log(q)
    // },
    del: function (id) {
      let i = -1;
      let index = null;
      for (let s of this.list) {
        i = i + 1;
        if (s.id == id) {
          console.log(s);
          this.list.splice(i, 1);
          this.$message({
            message: "删除成功",
            type: "info",
          });
        }
      }
    },
    cel: function () {
      this.$confirm("是否取消", "提示", {
        confirmButton: "确定",
        cancelButton: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            message: "取消成功",
            type: "success",
          });
        })
        .catch(() => {
          this.$message({
            message: "失败",
            type: "success",
          });
        });
    },
  },
  created() {
    window.onload = function () {
      var a = document.getElementById("a");
      console.log(a.clientHeight);
    };
    this.$store.dispatch("page");
  },
  computed: {
    table: {
      get: function () {
        return this.$store.state.page;
      },
    },
  },
};
</script>